<script setup lang="ts">
import { toRefs, computed } from 'vue';
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const { type, disabled } = toRefs(props);
const buttonType = [
  'primary',
  'success ',
  'warning ',
  'danger',
  'info',
  'text',
];
const types = computed(() =>
  buttonType.includes(type.value) ? `o-tag--${type.value}` : ''
);

const isDisabled = computed(() => (disabled.value ? 'is-disabled' : ''));
const emit = defineEmits(['tag-click']);

function onTagClick() {
  emit('tag-click');
}
</script>
<template>
  <span class="o-tag" :class="[types, isDisabled]" @click="onTagClick">
    <slot></slot>
  </span>
</template>
<style lang="scss" scoped>
.o-tag {
  font-size: 12px;
  display: inline-block;
  color: var(--theme-text);
  line-height: 24px;
  padding: 0 8px;
  &--primary {
    cursor: pointer;
    background: rgba(var(--theme-primary-hover), 0.24);
  }
  &.is-disabled {
    cursor: default;
    background: rgba(var(--theme-black-rgb), 0.1);
    color: var(--theme-text);
  }
}
</style>
